<template>
  <div  class="makeup-all">
    <div
    v-for=" (items , index ) in JSON.parse(JSON.stringify(this.new7list))"
    :key="items.image"
    >
      <div class="nctouch-home-block"
      >
          <div class="item-pic">
            
            <a href="javascript:void(0);">
                <img
                    :src="items.imageUrl"
                />

            </a>
          </div>
      </div>
        <ul  class="makeup-ul" >    
          <li
            v-for="data in new47list[index].goods"
            :key="data.commonId"
            v-on:click='todetail(data.commonId)'
          >
            <a href="javascript:void(0);">
                <div>
                    <img :src="data.imageUrl" alt="">
                </div>
                <div class="makeup-info">
                    <div class="makeup-name">
                       {{data.goodsName}}
                    </div>
                    <div class="makeup-price">
                      <span>￥{{data.goodsPrice}}</span> 
                      <div class="vipprice"
                      >
                        会员价：
                          <em>￥
                            <i>{{data.vipPrice}}</i>
                          </em>
                      </div>
                    </div>
                </div>
            </a>
          </li>
        </ul>
      </div>

  </div>
</template>

<script>
export default {

  props: ["home7list","home47list"],
  methods: {
    todetail(commonId){
      this.$emit('commonId',commonId)
    }
  },
  
  data(){
    return {
        new7list : [],
        new47list : [],
        new47data : []
    }
  },

  watch: {
    home7list(){
       
        for (let items in this.home7list){

          this.home7list[items] = JSON.parse(this.home7list[items])
          this.home7list[items].map((item)=>{
            return this.new7list.push(item)
          })}

        
        
        },
    home47list(){
        for (let items in this.home47list){
          this.home47list[items] = JSON.parse(this.home47list[items])
            this.home47list[items].map((item)=>{
              return this.new47list.push(item)
            })}
          // console.log( JSON.parse(JSON.stringify(this.new47list)))

        for(let data in this.new47list){

          // console.log(this.new47list[data].goods)

          
        
    }
    }
    
    }
  

};
</script>

<style lang = "stylus" scoped >
.makeup-all
  margin-bottom 1rem
.nctouch-home-block
  img 
    width  100% 
.makeup-ul 
    display flex
    width  100% 
    flex-wrap wrap
    li 
      width 33.33%
      img 
        width 100%
    /* li:nth-of-type(1) 
      .vipprice
        display  none */
      
.makeup-info
  margin: 0 0.08rem;
  padding-bottom: 0.08rem;
  .makeup-name
    font-size  0.1rem 
    color  #333 
    line-height  0.2rem 
    height  0.2rem 
    overflow  hidden 
    text-overflow  ellipsis 
    white-space  nowrap 
  .makeup-price
    span 
      color  #333
      font-size  0.12rem
      display  block
    .vipprice
      color  #333
      font-size  0.08rem
      height  0.2rem
      line-height  0.2rem
      overflow  hidden
      word-break  break-all
      
      em 
        color #FF4A42
      span 
        color  #333 
        font-size  0.55rem 
        display  block 

</style>